<template>
  <div class="square-screen-item">
    <div class="common">
      <div class="left">{{ title }}:</div>
      <div class="right">
        <ul>
          <templent v-for="(item, index) in showData" :key="index">
            <li :class="['li', choise == index ? 'active' : '']" @click="isClick(index, item)">
              <span>{{ item }}</span>
            </li>
          </templent>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
const props = defineProps({
  showData: Array,
  title: String
})
// 默认不选中，设置为-1
const choise = ref(-1)
const emits = defineEmits(['updateFilter'])
//点击改变index
const isClick = (index: number, item: any) => {
  choise.value = index
  // console.log(item) // 打印点击的值
  emits('updateFilter', { filterType: props.title, value: item })
}
// 主动暴露isClick方法
defineExpose({ isClick })
</script>

<style scoped>
.square-screen-item {
  display: flex;
  margin-left: 20px;
  flex-direction: column;
  padding-bottom: 4px;
  .common {
    display: flex;
    .left {
      letter-spacing: 2px;
      font-size: 15px;
      margin-top: 13px;
      font-weight: 700;
    }
    .right {
      flex: 1;
      margin-left: 10px;
      display: flex;
      flex-wrap: wrap;
      .li {
        display: inline-block;
        width: 100px;
        border-radius: 4px;
        font-size: 13px;
        height: 22px;
        text-align: center;
        line-height: 22px;
        margin: 7px 5px 0 0;
        padding: 4px 0;
      }
      .li:hover {
        background: #409eff;
        color: #fff;
      }
      .active {
        background: #409eff;
        color: #fff;
      }
    }
  }
}
</style>
